<template>
  <div class="content_width basic_info_con">
    <UserInfo></UserInfo>
    <div class="left_con">
      <LeftMenu :menuItemId="menuItemId"></LeftMenu>
    </div>
    <div class="right_con">
      <div class="top_con">
        <Breadcrumb separator=">" class="r_l_width">
          <BreadcrumbItem to="/PatientList">病例库</BreadcrumbItem>
          <BreadcrumbItem>活检病理</BreadcrumbItem>
        </Breadcrumb>
        <div class="r_r_width">
          <span>患者姓名：</span>
          <span>PID：2020072101ZZHH</span>
        </div>
        <div class="r_r_txt">病例概览</div>
      </div>
      <div class="main_con">
        <Row>
          <Col span="24" class="btns">
            <Button>添加新记录</Button>
            <Button>复制表单</Button>
            <Button type="primary">2020-7-21</Button>
          </Col>
          <Col span="12">
            <span class="m_left left_choose">活检日期</span>
            <span class="m_right">
              <DatePicker type="date" :value="value1" placeholder="请选择活检日期" style="width: 200px"></DatePicker>
            </span>
          </Col>
          <Col span="12">
            <span class="m_left left_choose">活检医院</span>
            <span class="m_right">
              <Select v-model="model1" style="width:200px">
                <Option
                  v-for="item in hospitalList"
                  :value="item.value"
                  :key="item.value"
                >{{ item.label }}</Option>
              </Select>
            </span>
          </Col>
          <Col span="12">
            <span class="m_left left_choose">医院名称</span>
            <span class="m_right">
              <Input v-model="valueHospital" placeholder="请输入医院名称" style="width: 200px" />
            </span>
          </Col>
          <Col span="12">
            <span class="m_left left_choose">病理报告日期</span>
            <span class="m_right">
              <DatePicker type="date" :value="value2" placeholder="请选择报告日期" style="width: 200px"></DatePicker>
            </span>
          </Col>
          <Col span="12">
            <span class="m_left left_choose">病理号</span>
            <span class="m_right">
              <Input v-model="valueNum" placeholder="请输入病理号" style="width: 200px" />
            </span>
          </Col>
          <Col span="12">
            <span class="m_left left_choose">标本来源</span>
            <span class="m_right">
              <Select v-model="model2" style="width:200px">
                <Option
                  v-for="item in regionlList"
                  :value="item.value"
                  :key="item.value"
                >{{ item.label }}</Option>
              </Select>
            </span>
          </Col>
          <Col span="12">
            <span class="m_left left_choose">取材方式</span>
            <span class="m_right">
              <Select v-model="model3" style="width:200px">
                <Option
                  v-for="item in modelList"
                  :value="item.value"
                  :key="item.value"
                >{{ item.label }}</Option>
              </Select>
            </span>
          </Col>
          <Col span="12">
            <span class="m_left left_choose">标本类型</span>
            <span class="m_right">
              <Select v-model="model4" style="width:200px">
                <Option
                  v-for="item in typelList"
                  :value="item.value"
                  :key="item.value"
                >{{ item.label }}</Option>
              </Select>
            </span>
          </Col>
          <Col span="24">
            <span class="m_left left_choose">取材部位</span>
            <span class="m_right">
              <Select v-model="model5" style="width:200px">
                <Option
                  v-for="item in regionlList2"
                  :value="item.value"
                  :key="item.value"
                >{{ item.label }}</Option>
              </Select>
            </span>
          </Col>
          <Col span="12">
            <Col span="24">
              <span class="m_left" style="height:1px;"></span>
              <span class="m_right" style="width:100%">组织学类型</span>
            </Col>
            <Col span="24">
              <span class="m_left" style="height:1px;"></span>
              <span class="m_right" style="width:100%">
                <Select v-model="model6" style="width:200px">
                  <Option
                    v-for="item in histolList"
                    :value="item.value"
                    :key="item.value"
                  >{{ item.label }}</Option>
                </Select>
              </span>
            </Col>
          </Col>
          <Col span="12">
            <Col span="24" class="margin-bottom-0">
              <Col span="18">
                <span class="m_right" style="width:100%">组织分化程度</span>
              </Col>
              <Col span="6">
                <span class="m_right" style="width:100%">操作</span>
              </Col>
            </Col>
            <Col span="24">
              <Col span="18">
                <span class="m_right" style="width:100%">
                  <Select v-model="model7" style="width:200px">
                    <Option
                      v-for="item in levellList"
                      :value="item.value"
                      :key="item.value"
                    >{{ item.label }}</Option>
                  </Select>
                </span>
              </Col>
              <Col span="6">
                <span class="m_right" style="width:100%">
                  <Icon type="ios-add-circle-outline" style="font-size:20px;color:#66AC99;font-weight:bold" />
                </span>
              </Col>
            </Col>
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
import UserInfo from "@/components/userInfo";
import LeftMenu from "@/components/leftMenu";

export default {
  components: {
    UserInfo,
    LeftMenu,
  },
  data() {
    return {
      model1: "1",
      model2: "1",
      model3: "1",
      model4: "",
      model5: "1",
      model6: "1",
      model7: "1",
      value1:'2020-07-21',
      value2:'2020-07-21',
      valueHospital: "医科院肿瘤医院",
      valueNum: "20-0713",
      menuItemId: '1',
      hospitalList: [
        {
          value: "1",
          label: "本院",
        },
      ],
      regionlList: [
        {
          value: "1",
          label: "原发灶",
        },
      ],
      regionlList2: [
        {
          value: "1",
          label: "左肺下叶",
        },
      ],
      modelList: [
        {
          value: "1",
          label: "活检穿刺",
        },
      ],
      typelList: [
        {
          value: "1",
          label: "",
        },
      ],
      histolList: [
        {
          value: "1",
          label: "腺癌",
        },
      ],
      levellList: [
        {
          value: "1",
          label: "低分化",
        },
      ],
    };
  },
  mounted() {
    this.menuItemId = this.$route.params.id 
  },
};
</script>

<style lang="less" scope>
.basic_info_con {
  .left_con {
    width: 240px;
    float: left;
  }
  .right_con {
    margin-left: 260px;
    .btns button {
      margin-right: 20px;
    }
  }
}
</style>